<template>
	<div>
		<div class="top-nav">
			<div class="ft14 "><a href="#" class="link ft18" style="color: #fff;">数字后勤服务大厅</a>&nbsp;&nbsp;&nbsp;<a href="#" @click.prevent="index" >进入主页</a>&nbsp;&nbsp;-&nbsp;<a href="#">服务监督</a>&nbsp;&nbsp;-&nbsp;<a href="#">膳食服务</a></div>
			<!--user login-->
			<div class="user-box1">
				<div class="boxOne" style="position: relative; top: 12px; left: -12px;">
					<i>
						<img :src="myImgUrl" width="30" height="30" style="border-radius: 5px;"/>
					</i>
				</div>
				  <div class="boxTwo">
				  	<a href="#" v-if="welcome" @click.prevent="personalCenter" style="color: white;">{{manager.userNickname==null? "Chenshangcai":manager.userNickname}}</a>&nbsp;&nbsp;&nbsp;
				  </div>
				  <div class="boxThree">
				  	<el-badge :value="12" class="item">
				  	  <el-button size="mini">消息</el-button>
				  	</el-badge>
				  </div>
			</div>
		</div>
		<div class="back"></div>
		<div class="nav">
			<!-- 3.使用 -->
			<!-- <menus :menus="menus"></menus> -->
			<el-menu default-active="0" class="el-menu-vertical-demo" @select="selectNav">
			  <el-submenu index="1">
				<template slot="title">
				  <i class="el-icon-location"></i>
				  <span>个人中心</span>
				</template>
				<el-menu-item-group>
				  <el-menu-item index="/personalCenter/AccountManage">基本信息</el-menu-item>
				</el-menu-item-group>
			  </el-submenu>
			  <el-submenu index="2">
				<template slot="title">
				  <i class="el-icon-location"></i>
				  <span>用户管理</span>
				</template>
				<el-menu-item-group>
				  <el-menu-item index="/personalCenter/RoleManage">角色管理</el-menu-item>
				</el-menu-item-group>
			  </el-submenu>
			  <el-submenu index="3">
				<template slot="title">
				  <i class="el-icon-location"></i>
				  <span>维修管理</span>
				</template>
				<el-menu-item-group>
				  <el-menu-item index="/personalCenter/AreaManage">区域管理</el-menu-item>
				  <el-menu-item index="/personalCenter/ProjectManage">项目管理</el-menu-item>
				</el-menu-item-group>
			  </el-submenu>
			  <el-menu-item index="/personalCenter/RepairManage">
				  <i class="el-icon-location"></i>
				  <span>报修管理</span>
			  </el-menu-item>
			  <el-menu-item index="/personalCenter/PublicManage">
				  <i class="el-icon-location"></i>
				  <span>公告管理</span>
			  </el-menu-item>
			  <el-menu-item index="/personalCenter/ServiceManage">
				  <i class="el-icon-location"></i>
				  <span>服务指南管理</span>
			  </el-menu-item>
			  <el-submenu index="7">
				<template slot="title">
				  <i class="el-icon-location"></i>
				  <span>材料管理</span>
				</template>
				<el-menu-item-group>
				  <el-menu-item index="/personalCenter/MaterialTotalManage">材料总表</el-menu-item>
				  <el-menu-item index="/personalCenter/MaterialUseManage">用料总表</el-menu-item>
				</el-menu-item-group>
			  </el-submenu>
			</el-menu>
		</div>
		<div class="context">
			<!-- 渲染路径匹配到视图界面 -->
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				myImgUrl:null,
				manager:null,
				welcome:true
			}
		},
		methods:{
			selectNav(index){
				if(index==null){
					this.$router.push("/personalCenter/AccountManage");
				}
				this.$router.push(index);
			},
			index(){
				this.$router.push("/");
			},
			loadUser(){
				let Json = localStorage.getItem("adminRoot");
				this.manager=JSON.parse(Json);
				this.myImgUrl=this.manager.userImage;
			}
		},
		created() {
			this.loadUser();
			this.selectNav();
		}
	}
</script>

<style>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	.context{
		margin-left: 10px;
		position: absolute;
		right: 0;
		left: 250px;
		top: 100px;
		bottom: 0;
		height: 650px;
		background-color: white;
		padding: 10px 10px;
		overflow-x:hidden;
		overflow-y:auto;
	}
	.nav{
		position: absolute;
		width: 250px;
		top: 100px;
		bottom: 0;
		height: 670px;
		background-color: white;
	}
	.boxThree{
		position: relative; 
		left: -25px;
	}
	.user-box1 > div{
		display: inline-block;
	}
	.user-box1{
		float: right;
		margin-right: 1%;
		height: 50px;
		line-height: 30px;
		position: relative;
		top: -48px;
	}
	.ft14{
		width: 75%;
		margin-left: 30px;
	}
	.ft14 a{
		color: #bfe4fa;
	}
	.top-nav{
		width: 1520px;
		padding: 0 0 0 1%;
		overflow: hidden;
		background: #02507e;
		height: 46px;
		line-height: 46px;
		color: #bfe4fa;
	}
	.back{
		width: 100%;
		height: 1000px;
		z-index:-1;
		background-image: url(../img/repair-bg.png);
		background-repeat: inherit;
	}
	
</style>
